<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-top-tips :navbar-height="navHeight" ref="uTopTips"></u-top-tips>
		<!-- #endif --> 
		<!-- #ifdef MP-TOUTIAO || MP-ALIPAY --> 
		<u-top-tips class="u-top-tips" ref="uTopTips" zIndex="99999"></u-top-tips>
		<!-- #endif -->
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		name:"TopTips",
		data() {
			return {
				menuButton: menuButtonInfo,
				statusBarHeight: systemInfo.statusBarHeight,
				navHeight:''
			};
		},     
		created() {
			const navBarPadding = (this.menuButton.top - this.statusBarHeight) * 2
			let navHeight = this.menuButton.height + navBarPadding
			let headerHeight = navHeight + this.statusBarHeight
			this.navHeight = headerHeight
		},
		methods: {
			show(option) {
				this.$refs.uTopTips.show(option)
			}
		},
	}
</script>

<style lang="scss">
	.u-top-tips {
	  z-index: 999999;
	}
</style>